<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Splan</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css" />
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="css/app.css" />
		<link rel="stylesheet" type="text/css" href="css/loading.css" />
	</head>
	<body>
		<div id="app-loading">
			<div v-if="seen">
				<div id="loader-wrapper">
					<div id="loader"></div>
					<div class="loader-section section-left"></div>
					<div class="loader-section section-right"></div>
					<div class="load_title">正在加载 , 请耐心等待
						<br>
						<span>Splan1.0</span>
					</div>
				</div>
			</div>
		</div>
		<div id="app-main">
			<div class="mui-content" v-for="item in info">
				<div class="mui-card">
					<div class="mui-card-header mui-card-media">
						<img src="img/logo.png" />
						<div class="mui-media-body">
							{{item.username}}
							<p>发表于 {{item.date}}</p>
						</div>
					</div>
					<div class="mui-card-content">
						<div class="mui-card-content-inner">
							{{item.plan}}
						</div>
					</div>
				</div>
			</div>
		</div>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item" href="index.html">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" href="pages/input.html">
				<span class="mui-icon mui-icon-email"></span>
				<span class="mui-tab-label">上传计划</span>
			</a>
		</nav>
		<script src="js/vue.js"></script>
		<script src="js/mui.min.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		</script>
		<script type="text/javascript">
			(function($) {
				$(".mui-scroll-wrapper").scroll({
					bounce: false, //滚动条是否有弹力默认是true
					indicators: true, //是否显示滚动条,默认是true
				});
			})(mui);
			//解决 所有a标签 导航不能跳转页面 
			mui('body').on('tap', 'a', function() {
				document.location.href = this.href;
			});
			var vl = new Vue({
				el: '#app-loading',
				data: {
					seen: true //loading显示
				}
			});
			var vm = new Vue({
				el: '#app-main',
				data() {
					return {
						info: null
					}
				},
				mounted() {
					axios
						.get('http://18.18.18.18:8080/plan', {
							headers: {
								"Access-Control-Allow-Origin": "*" //跨域请求
							}
						})
						.then(
							response => (
								this.info = response.data.items,
								vl.seen = false //请求处理成功后loading消失
							)
						)
						.catch(function(error) { // 请求失败处理
							console.log(error);
						});
				}
			})
		</script>
	</body>
</html>
